<meta charset="UTF-8">
<style type="text/css">
	.step{
		background:url('__PUBLIC__/Image/Index/step.png') no-repeat;
		height:50px;
		margin:50px;
		margin-top:30px;
		margin-bottom:30px;
	}
</style>
<script type="text/javascript">
	var checkPhoneFlag = false;
	$(function(){
		$('#registerModal').on('show.bs.modal', function (e) {
			// 检查是否同意协议。同意，注册按钮可操作，否则，不可操作
			if($("#registerModal #agree").is(":checked") == false){
				$("#registerModal #agree").click();
			} 
			$("#registerModal #username").val("");
			$("#registerModal #verify").val("");
			$("#registerModal #sms_verify_code").val("");
			
			$("#registerModal #password").val("");
			$("#registerModal #password-confirm").val("");
			
			$("#registerModal #msg-phone").text("");
			
			refreshVerify('__URL__/verify');
			$("#registerModal .first_step").show();
			$("#registerModal .second_step").hide();
			$("#registerModal .third_step").hide();
			
			
			checkPhoneFlag = false;
			
		});
			
		$("#registerModal #agree").click(function(){
			if($("#registerModal #agree").is(":checked") == false){
				$("#registerModal #first_to_second_btn").attr("disabled", true);
				$("#registerModal #first_to_second_btn").css("background-color", "gray");
			} else {
				$("#registerModal #first_to_second_btn").removeAttr("disabled");
				$("#registerModal #first_to_second_btn").css("background-color","#FF9219");
			}
		});
		
		// 发送验证码
		$("#registerModal #sendSmsVerify").click(function(){
			// 账户信息(手机号)
			var phone = $("#registerModal #username").val();
			// 手机号的合法性检查
			if (!phone.match(/1[3-9]\d{9}$/)){
				alert("请输入正确的手机号！");
				return false;
			}
			
			$("#registerModal #sendSmsVerify").attr("disabled", true);
			var timeInt = 59;
			$("#registerModal #sendSmsVerify").css("background-color", "gray");
			var timer = window.setInterval(function(){
				if(timeInt == 59){
					$.ajax({
						   url:"__URL__/sendSmsVerify",
						   type:"POST",
							async: false,
						    data: "phone=" + phone,
						    dataType: "json",
						    success:function(respData) {
						    	// 发送失败
						    	if(respData.status != 200){
						    		alert(respData.message);
						    		$("#registerModal #sendSmsVerify").removeAttr("disabled");
									$("#registerModal #sendSmsVerify").css("background-color", "#349E18");
									$("#registerModal #sendSmsVerify").html("发送验证码");
									clearInterval(timer);
						    	}
						    },
						    error:function(){
						    	
						    }
					   });
				}
				if(timeInt == 0){
					$("#registerModal #sendSmsVerify").removeAttr("disabled");
					$("#registerModal #sendSmsVerify").css("background-color", "#349E18");
					$("#registerModal #sendSmsVerify").html("发送验证码");
					clearInterval(timer);
					return false;
				}
				
				$("#registerModal #sendSmsVerify").html(timeInt + "秒后重发");
				timeInt -= 1;
				},1000);
		});
		
		// 点击注册按钮
		$("#registerBtn").click(function(){
			register();
		});
		
		 //回车键按下时执行注册
		 /* $('#registerModal').keydown(function(event){
			 if($("#registerModal #agree").is(":checked") == true){
				 if(event.keyCode == 13){
					 register(verifyCode);
				 }
			 }
		 }); */
	});
	
	/**
	 * 刷新验证码
	 */
	function refreshVerify(url){
		$("#registerModal #verifyImg").attr("src", url + "?time=" + (Math.round(Math.random()*999)+3000).toString());
	};
	
	// 检查手机
	function checkPhone(phone){
		// 手机号的合法性检查
		if (!phone.match(/1[3-9]\d{9}$/)){
			$("#registerModal #msg-phone").text("请输入正确的手机号！");
			return false;
		}
		// 验证手机号是否已经被注册
		$.ajax({
			url:"__URL__/checkHasExistedRtnJson",
			type:"POST",
			async: true,
			   data: "phone=" + phone,
			   dataType: "json",
			   success:function(respData) {
				   if(respData.status == 200){
					   $("#registerModal #msg-phone").text("该手机号已经被注册");
				   } else {
					   $("#registerModal #msg-phone").text("");
					   checkPhoneFlag = true;
				   }
			   },
			   error:function(data){
				   $("#registerModal #msg-phone").text("手机号验证失败");
			   }
		});
	}
	
	// 跳转到第二步
	function gotoSecondStep(){
		
		// 手机号
		var phone = $("#registerModal #username").val();
		// 手机号的合法性检查
		if (!phone.match(/1[3-9]\d{9}$/)){
			$("#registerModal #msg-phone").text("请输入正确的手机号！");
			return false;
		}
		if(!checkPhoneFlag){
			if($.trim($("#registerModal #msg-phone").text()) == ""){
				$("#registerModal #msg-phone").text("请输入正确的手机号！");
			}
			return false;
		}
		
		// 验证码
		var code = $("#registerModal #verify").val();
		if($.trim(code) == ""){
			alert("请输入验证码");
			return false;
		}
		// 动态密码
		var smsCode = $("#registerModal #sms_verify_code").val();
		if($.trim(smsCode) == ""){
			alert("请输入获取到的动态密码");
			return false;
		}
		// 验证码检查
		$.ajax({
			url:"__URL__/checkVerify",
			type:"POST",
			async: true,
			   data: "code=" + code,
			   dataType: "text",
			   success:function(respData) {
				   if (respData != null) {
					   if(respData == "true"){
						   // 验证动态密码
						   $.ajax({
							   url:"__URL__/checkSmsVerify",
							   type:"POST",
								async: true,
							    data: "phone=" + phone + "&smsVerifyCode=" + smsCode,
							    dataType: "json",
							    success:function(respData) {
							    	if(respData.status == 200){
							    		//$('#registerModal').modal('hide');
							    		// 检查用户是否登录
										//checkHasLogined("__URL__/checkHasLogined");
							    		$("#registerModal .first_step").hide();
							    		$("#registerModal .third_step").hide();
							    		$("#registerModal .second_step").show("slow","linear");
							    	}else{
							    		alert(respData.message);
							    	}
							    },
							    error:function(){
							    	
							    }
						   });
					   } else {
						   alert("验证码不正确！");
						   refreshVerify('__URL__/verify');
					   }
				   }
			   },
			   error:function(responseData) {
				   //alert(responseData.responseText);
			   }
		   });
	}
	
	/**
	 * 新用户注册
	 * 
	 */
	function register(){
 	   
		// ===== 数据合法性检查 =========
		// 账户信息(手机号)
		var phone = $("#registerModal #username").val();
		// 密码
		var pwd = $("#registerModal #password").val();
		// 确认密码
		var pwd_confirm = $("#registerModal #password-confirm").val();
		// 密码的合法性检查
		if (pwd.length == 0){
			alert("密码不能为空！");
			return false;
		}
		if (pwd.length < 6){
			alert("密码必须大于6位！");
			return false;
		}
		if (pwd != pwd_confirm){
			alert("两次输入的密码不一致！");
			return false;
		}

		// 执行注册操作
		 $.ajax({
			   url:"__URL__/register",
			   type:"POST",
				async: false,
			    data: "username=" + phone + "&password=" + pwd,
			    dataType: "json",
			    success:function(respData) {
				   if(respData.status == 200){
					   //$('#registerModal').modal('hide');
					   $("#loginUser").val(respData.user_id);
					   $("#user_display").text(respData.name);
					   checkHasLogined("__URL__/checkHasLogined");
					   $("#registerModal .first_step").hide();
					   $("#registerModal .second_step").hide();
			    	   $("#registerModal .third_step").show("slow","linear");
				   } else {
					   alert(respData.message);
				   }
			    },
			    error:function(){
			    	
			    }
		   });
	}
	
	// 返回个人中心
	function gotoPersonCenter(){
		$('#registerModal').modal('hide');
		$("#personCenter").click();
	}
</script>

<!-- 注册模态框（Modal） -->
<div class="modal fade" id="registerModal" tabindex="-1" role="dialog"
   aria-hidden="true">
   <div class="modal-dialog" style="margin-top:8%;">
      <div class="modal-content" style="height:500px;width:700px;">
         <div class="modal-header" style="background-color:#43b413;color:white;height:70px;">
         	<div style="text-align:center;font-size:30px;">手机注册</div>
            <button type="button" class="close"
               data-dismiss="modal" aria-hidden="true" style="position:absolute;right:10px;top:10px;font-size:40px;font-weight:bold;color:white;opacity:1;">
                  &times;
            </button>
         </div>
         <div class="modal-body">
            <form class="form-horizontal" role="form" method="post">
            <!--手机注册第一步开始-->
            <div class="first_step">
               <div class="step step1" style=""></div>
			   <div class="form-group">
			      <label for="username" class="col-sm-4 control-label">手机号码:</label>
			      <div class="col-sm-4">
			         <input type="text" class="form-control" id="username" name="username"
			            placeholder="请输入手机号" oninput="checkPhone(this.value);" onpropertychange="checkPhone(this.value);">
			      </div>
			      <div class="col-sm-4" style="padding:10px;padding-left:0;color:red;" id="msg-phone"></div>
			   </div>
			   <div class="form-group">
			   	  <label for="verify" class="col-sm-4 control-label" >验证码:</label>
	   			  <div class="col-sm-4">
	 			  	  <input type="text" class="form-control" id="verify" 
			            placeholder="不区分大小写" maxlength=4>
			         <img src="{:U('Index/verify')}" style="width:85px;height:35px;position:absolute;right:25px;top:2px;" id="verifyImg">
			      </div>
			      <div class="">
			         <label class=" control-label" style="text-align:left;">看不清
			         <a onclick="refreshVerify('{:U('Index/verify')}')" style="cursor:pointer;margin-left:20px;">换一张</a></label>
			      </div>
		      </div>
			   <div class="form-group">
			      <label for="sms_verify_code" class="col-sm-4 control-label" >校 验 码:</label>
			      <div class="col-sm-4">
			         <input type="text" class="form-control int" id="sms_verify_code" maxlength=6
			            placeholder="请输入校验码">
			      </div>
			      <div class="col-sm-2">
			         <button type="button" class="btn btn-default" id="sendSmsVerify" style="background-color:#349E18;color:white;">获取动态密码</button>
			      </div>
			   </div>
			   <div class="form-group">
			      <div class="col-sm-offset-4 col-sm-5">
			         <div class="checkbox">
			            <label style="" id="agreeLabel">
			               <input type="checkbox" id="agree">愿意接受
			               			<a href="{:U('Index/showProtocol')}?id=1" target="_blank" style="color:#43b313; border-bottom: 1px dashed #43b313;margin-left:10px;">义达会员协议</a>
			            </label>
			         </div>
			      </div>
			   </div>
			   <div class="form-group">
			      <div class="col-sm-offset-4 col-sm-4">
			         <button type="button" class="btn btn-default" id="first_to_second_btn"
			         style="background-color:#FF9219;color:white;height:50px;width:100%;font-size:25px;" onclick="gotoSecondStep();">下一步</button>
			      </div>
			   </div>
		   </div>
		   <!--手机注册第一步结束-->
		   
		   <!--手机注册第二步开始  -->
		   <div class="second_step" style="display:none;">
		   		<div class="step step2" style="background-position:0 -50px;"></div>
			   	<div class="form-group">
			      <label for="password" class="col-sm-4 control-label" >登录密码:</label>
			      <div class="col-sm-4">
			         <input type="password" class="form-control" id="password" name="password"
			            placeholder="">
			      </div>
			   </div>
			   <div class="form-group" style="margin-top:40px;">
			      <label for="password-confirm" class="col-sm-4 control-label" >确认密码:</label>
			      <div class="col-sm-4">
			         <input type="password" class="form-control" id="password-confirm" 
			            placeholder="">
			      </div>
			   </div>
			   <div class="form-group" style="margin-top:40px;">
			      <div class="col-sm-offset-4 col-sm-4">
			         <button type="button" class="btn btn-default" id="registerBtn"
			         style="background-color:#FF9219;color:white;height:50px;width:100%;font-size:25px;">下一步</button>
			      </div>
			   </div>
		   </div>
		   <!--手机注册第二步结束  -->
		</form>
		<!--手机注册第三步开始  -->
			<form class="form-horizontal" role="form" method="post">
			   <div class="third_step" style="display:none;">
			   		<div class="step step3" style="background-position:0 -100px;"></div>
				   	<div class="form-group" style="margin:100px;margin-top:0;margin-bottom:30px;">
				      <div class="col-sm-12" style="margin-top:10px;">
					      <div class="col-sm-3">
					      	  <img alt="" src="__PUBLIC__/Image/Index/ok.png">
					      </div>
					      <div class="col-sm-9" style="padding-top:20px;">
						      <div style="font-size:30px;font-weight:bolder;color:#9C242B;">恭喜您已注册成功！</div>
					      	   <div style="margin-top:10px;">
						      	   <a href="javascript:gotoPersonCenter();"  style="">进入会员中心</a>
					      	   		/<a href="{:U('Index/showIndex')}" style="">去预定</a>
					      	   		/<a href="{:U('Index/showIndex')}" style="">返回首页</a> 
					      	   </div>
					      </div>
				      </div>
				   </div>
			   </div>
		   </form>
		   <!--手机注册第三步结束  -->
         </div>
         <div class="modal-footer">
         </div>
      </div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>